<template>
	<view class="usedCar-content">
		<u-navbar :is-back="true" title=" ">
			<view class="slot-wrap">
				<view class="nav-address" @click="locationShow = true">
					{{queryForm.city}}<u-icon name="arrow-down"></u-icon>
				</view>
				<u-picker mode="region" v-model="locationShow" @confirm='locationConfirm'
					:params="{ province: true,city: true, area: false }"></u-picker>
				<view class="nav-title">二手车</view>
				<view></view>
			</view>
		</u-navbar>
		<scroll-view class="query-list" scroll-y="true" style="height: 1000rpx;" @scrolltolower="scrolltolower" v-if="queryList.length != 0">
			<view class="list-item" v-for="item in queryList" :key="item.id" @click="gotoNext(item)">
				<view class="item-image">
					<image :src="'https://afyc.chitong.cn/uploads/' + item.img" mode=""></image>
				</view>
				<view class="item-detail">
					<view class="item-name">{{item.title}}</view>
					<view class="item-buttom">
						<view class="buttom-left">
							<view class="item-address">{{item.address}}</view>
							<view class="item-price">预估售价：<text>{{item.price}}万元</text></view>
						</view>
						<view class="item-cancat" @click.stop="callIt(item.phone)">
							<image src="../../static/image/call.png" mode=""></image>
							<view>联系车主</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="not-data" v-else>
			<image src="../../static/image/notData.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	import {
		getCarList
	} from "@/api/index.js"
	export default {
		data() {
			return {
				isLogin:false,
				queryForm: {
					page: 1,
					limit: 10,
					city: ''
				},
				last_page: 0,
				queryList: [],
				locationShow: false
			}
		},
		onLoad() {
			this.isLogin = uni.getStorageSync('isLogin')
			this.queryForm.city = uni.getStorageSync('city')
			this.getCarList()
		},
		methods: {
			locationConfirm(e) {
				uni.setStorageSync('city', e.city.label)
				this.city = e.city.label
				this.reset()
				this.getCarList()
			},
			getCarList() {
				getCarList(this.queryForm).then(res => {
					this.queryList = [...this.queryList, ...res.data.data]
					this.last_page = res.data.last_page
				})
			},
			gotoNext(item) {
				uni.navigateTo({
					url: '/pages/usedCarDetail/index?title=' + item.title + '&carId=' + item.id + '&pageStatus=0'
				})
			},
			// 重置查询表单，和列表
			reset() {
				this.queryForm = {
					page: 1,
					limit: 10,
					city: uni.getStorageSync('city')
				}
				this.queryList = []
			},
			scrolltolower() {
				if (this.last_page != this.queryForm.page) {
					this.queryForm.page++
					this.getCarList()
				}
			},
			callIt(phoneNumber) {
				if (!this.isLogin) {
					uni.showModal({
						title: "提示",
						content: "登录后才能联系车主",
						success: function(res) {
							if (res.confirm) {
								uni.reLaunch({
									url:'/pages/login/login'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})
					return
				}
				uni.makePhoneCall({
					phoneNumber //仅为示例
				});
			}
		}
	}
</script>

<style lang="scss">
	.not-data {
		width: 100%;
		height: 500rpx;
	
		>image {
			width: 100%;
			height: 100%;
		}
	}
	.slot-wrap {
		display: flex;
		// padding: 0 20rpx;
		justify-content: space-between;
		width: 100%;
	}

	.query-list {
		padding: 20rpx;

		.list-item {
			background-color: #fff;
			border-radius: 8rpx;
			padding: 20rpx;
			display: flex;
			margin-top: 20rpx;
			width: 95%;

			.item-image {
				width: 230rpx;
				height: 172rpx;
				margin-right: 10rpx;

				>image {
					border-radius: 15rpx;
					width: 230rpx;
					height: 172rpx;
				}
			}

			.item-detail {
				display: flex;
				flex-direction: column;
				width: 100%;
				justify-content: space-between;

				.item-name {
					color: #333333;
					font-size: 26rpx;
				}

				.item-buttom {
					display: flex;
					justify-content: space-between;

					.buttom-left {
						font-size: 22rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						color: #999999;
						flex: 4;
					}

					.item-price {
						font-size: 22rpx;
						color: #333333;

						>text {
							font-size: 28rpx;
							color: #FE3939;
						}
					}


					.item-cancat {
						flex: 1;
						margin-top: 10rpx;
						color: #666666;
						font-size: 18rpx;
						text-align: center;

						>image {
							width: 45rpx;
							height: 45rpx;
						}
					}
				}
			}
		}

	}
</style>